<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<title>极验行为式验证 php 类网站安装测试页面</title>
</head>
<body>
	<style type="text/css">

		.container{
			width: 960px;
			margin: 0 auto;
		}
		.content{
			width: 960px;
			margin: 10 auto;
			border-top: 1px solid #ccc;

		}
		.box{
			width:300px;
			margin: 30px auto; 
		}
		.header{
			margin: 80px auto 30px auto;
			text-align: center;
			font-size: 34px;
		}
		input{
			width: 200px;
			padding: 6px 9px;
		}
		button{
			cursor: pointer;
			line-height: 35px;
			width: 110px;
			margin:30px 0 0 90px;
			border: 1px solid #FFFFF0;
			background-color: #31C552;

			border-radius: 4px;
			font-size: 14px;	
			color: #FFFFF0;	
		}
	</style>

	<div class="container">
		<div class="header">
			极验行为式验证 php 类网站安装测试页面
		</div>
		<div class="content">
			<form method="post" action="../web/VerifyLoginServlet.php">
				<div class="box">
					<label>邮箱：</label>
					<input type="text" name="email" value="geetest@geetest.com"/>
				</div>
				<div class="box">
					<label>密码：</label>
					<input type="password" name="password" value="geetest"/>
				</div>
				<div class="box" id="div_geetest_lib">
				<div id="captcha"></div>
				<script src="http://static.geetest.com/static/tools/gt.js"></script>
				<script>
				    var handler = function (captchaObj) {
				         // 将验证码加到id为captcha的元素里
				         captchaObj.appendTo("#captcha");
				     };
				    $.ajax({
				        // 获取id，challenge，success（是否启用failback）
				        url: "../web/StartCaptchaServlet.php?rand="+Math.round(Math.random()*100),
				        type: "get",
				        dataType: "json", // 使用jsonp格式
				        success: function (data) {
				            // 使用initGeetest接口
				            // 参数1：配置参数，与创建Geetest实例时接受的参数一致
				            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
				            initGeetest({
				                gt: data.gt,
				                challenge: data.challenge,
				                product: "embed", // 产品形式
				                offline: !data.success
				                //更多前端参数配置 http://www.geetest.com/install/sections/idx-client-sdk.html#config-para
				            }, handler);
				        }
				    });
				</script>
					</div>
				<div class="box">
					<button id="submit_button">提交</button>
				</div>
			</form>
		</div>
	</div>
</body>
</html>